<template>
	<view class="container" ref="container">	
		<view style="height: 160rpx;" class="bg-gradual-orange2">
			<view style="height: 160rpx;width: 100%;display: flex;">
				<view style="height: 60rpx;width: 100%; margin-top: 110rpx;font-size: 32rpx;display: flex;">
					<view style="width: 20%;text-align: center;line-height: 32rpx;" @click="back()">
						<text class="cuIcon-back" style="height: 60rpx;"></text>
						<text> 返回</text>
					</view>
					<view style="width: 56%;text-align: center;line-height: 32rpx;">
						<text>基本信息</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="cu-bar search bg-white">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input class="text-shadow" :adjust-position="false" type="text" placeholder="请输入名称"
					confirm-type="search" @blur="InputBlur"></input>
			</view>
			<view class="action" @click="searchOrganization()">
				<button class="cu-btn bg-gradual-orange2 shadow-blur round">搜索</button>
			</view>
		</view>
		<view>
			<view style="width: 100%;overflow: auto;">
				<view class="padding-top-sm">
					<view class="cu-list menu-avatar">
						<view class="cu-item" v-for="(item,index) in schoolList" :key="index" @click="selectSchool(item)">
							<text>{{item.universityName}}</text>
						</view>
					    <view class='loadingicon acea-row row-center-wrapper' v-if='schoolList.length > 0 && !loadend'>
							<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
					    </view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Header from '@/subpages/components/header.vue'
	import {
		getUserInfo,
		getSchoolList
	} from '@/api/user.js'

	export default {
		components: {
			Header
		},
		data() {
			return {
				schoolList: [],
				value: '',
				modalName: null,
				scoreValue: '',
				organizationInfo: {},
				userInfo: '',
				loading: false,				
				loadTitle:'加载更多',
				loadend: false, // 加载到底部
				page: 1, // 页数
				pagesize: 10, // 每页条数
				scrollTop: 0
			}
		},
		onReady() {
			
		},
		onPageScroll(res) {
			uni.$emit('onPageScroll', res.scrollTop);//传递参数
		},
		mounted() {
			var that = this;
			uni.$on('onPageScroll', function(data) {//接收参数
				console.log(data);
				that.scrollTop = data;
			});
		},
		methods: {
			back() {
				this.$emit('back')
			},
			/**获取组织数据*/
			async getList(name, isPage) {
				if (isPage) {
					this.loadend = false
					this.page = 1
					this.schoolList = []
				}
				if (this.loading) return
				if (this.loadend) return
				this.loading = true
				this.loadTitle = ''
				uni.showLoading({
					title: '数据加载中...',
					mask: true
				});
				const query = {
					page: this.page,
					pagesize: this.pagesize,
					keywords: name
				}
				getSchoolList(query).then(res => {
					uni.hideLoading();
					if (res.code == 200) {
						const list = res.data.lists
						this.loadend = list.length < this.pagesize
						this.schoolList = [...this.schoolList, ...list]
						this.loadTitle = this.loadend ? '我也是有底线的' : '加载更多'
						this.page++
					} else {
						uni.showToast({
							title: '获取数据失败！',
							duration: 1000,
							icon: 'none',
						});
					}
					this.loading = false
				});
			},
			/**查询组织*/
			searchOrganization() {
				if (this.value === null || this.value === '') {
					uni.showToast({
						title: '请输入搜索关键词！',
						icon: 'none'
					});
					return;
				}
				this.value = this.value.replace(/\s*/g, "");
				this.getList(this.value, true);
			},
			InputBlur(e) {
				this.value = e.detail.value;
			},
			selectSchool(item){
				this.$emit('change', item)
			},
			lazyLoading (e) { // 滚动到底部，再加载的处理事件
				const scrollTop = e.target.scrollTop // 滚动条滚动时，距离顶部的距离
				const windowHeight = e.target.clientHeight // 可视区的高度
				const scrollHeight = e.target.scrollHeight // 滚动条的总高度
				// 滚动条到底部
				if (scrollTop + windowHeight === scrollHeight) {
					// 滚动到底部，逻辑代码
					this.getList(this.value);
				}
			}
		},
		/**
		   * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function () {
			this.getList(this.value);
		}
	}
</script>

<style lang="less" scoped>
	.bg-gradual-orange2 {
		background-image: linear-gradient(45deg, #FF707A, #FD505C);
		color: #ffffff;
	}

	.line-orange2 {
		color: #FF707A;
	}
	
	.cu-item{
		padding: 0 20rpx;
		text{
			display: block;
			width: 100%;
			text-align: left;
		}
	}
</style>
